<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>安全设置</span>
      </div>
      <!-- 安全设置的容器 -->
      <div class="setting-box">
        <el-table :data="tableData" style="width: 100%" :show-header="false">
          <el-table-column prop="safeType" width="80"> </el-table-column>
          <el-table-column prop="status" width="80">
            <template slot-scope="scope"
              ><div :class="{ successStatus: scope.row.status }">
                <i class="el-icon-success"></i></div
            ></template>
          </el-table-column>
          <el-table-column prop="value" width="480" :formatter="formatValue">
          </el-table-column>
          <el-table-column>
            <template slot-scope="scope">
              <el-button type="text" v-if="checkType(scope.row) == '认证成功'"
                >认证成功</el-button
              >
              <el-button
                @click="authRealName"
                type="text"
                v-else-if="checkType(scope.row) == '去认证'"
                >去认证</el-button
              >
              <el-button
                type="text"
                v-else-if="checkType(scope.row) == '更换手机号'"
                >更换手机号</el-button
              >
              <el-button type="text" v-else-if="checkType(scope.row) == '修改'"
                >修改</el-button
              >
              <el-button type="text" v-else-if="checkType(scope.row) == '重置'"
                >重置</el-button
              >
              <el-button
                type="text"
                v-else-if="checkType(scope.row) == '去设置'"
                >去设置</el-button
              >
            </template></el-table-column
          >
        </el-table>
      </div>
    </el-card>
    <el-dialog
      title="实名认证"
      :visible.sync="dialogFormVisible"
      width="30%"
      center
    >
      <el-form
        ref="realNameForm"
        :model="realNameForm"
        :label-width="formLabelWidth"
      >
        <el-form-item label="姓名" prop="realName">
          <el-input
            v-model="realNameForm.realName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="身份证号码" prop="idNum">
          <el-input v-model="realNameForm.idNum" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit('realNameForm')"
          >添加</el-button
        >
        <el-button @click="onCancel('realNameForm')">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
export default {
  data() {
    return {
      formLabelWidth: "100px",
      dialogFormVisible: false,
      realNameForm: {
        realName: "",
        idNum: "",
      },
      tableData: [
        {
          safeType: "用户名",
          status: "",
          value: "123",
        },
        {
          safeType: "实名认证",
          status: "",
          value: "123",
        },
        {
          safeType: "手机认证",
          status: "",
          value: "123",
        },
        {
          safeType: "登录密码",
          status: "",
          value: "123",
        },
        {
          safeType: "支付密码",
          status: "",
          value: "123",
        },
      ],
    };
  },
  methods: {
    ...mapActions({
        realNameAuth:'user/realNameAuth'
    }),
    // 提交表单
    submit(formname) {
            this.realNameAuth(this.realNameForm).then((res) => {
              this.onCancel(formname);
              this.getStatus();
        });
    },
    // 隐藏弹出表单和重置表单
    onCancel(formname) {
      this.dialogFormVisible = false;
      this.$refs[formname].resetFields();
    },
    // 去实名认证
    authRealName() {
        this.dialogFormVisible = true
    },
    // 检查类型并返回操作的提示
    checkType(row) {
      if (row.safeType == "实名认证") {
        if (row.value) {
          return "认证成功";
        } else {
          return "去认证";
        }
      }
      if (row.safeType == "手机认证") {
        return "更换手机号";
      }
      if (row.safeType == "登录密码") {
        return "修改";
      }
      if (row.safeType == "支付密码") {
        if (row.value) {
          return "重置";
        } else {
          return "去设置";
        }
      }
    },
    // 格式化认证状态的值
    formatValue(row) {
      if (row.safeType == "用户名") {
        return row.value;
      }
      if (row.safeType == "实名认证") {
        return row.status ? "已认证" : "未认证";
      }
      if (row.safeType == "手机认证") {
        return row.status ? row.value : "未认证";
      }
      if (row.safeType == "登录密码") {
        return row.status ? "已设置" : "未设置";
      }
      if (row.safeType == "支付密码") {
        return row.status ? "已设置" : "未设置";
      }
    },
    // 获取用户的认证状态，并设置到表格数据里
    getStatus() {
      var count = 0;
      // 循环的获取用户认证状态的状态和值 保存到tabledata里面
      for (const key in this.accountStatus) {
        if (count < 5) {
          this.tableData[count].status = this.accountStatus[key];
          this.tableData[count].value = this.accountStatus[key];
          count++;
        }
      }
    },
  },
  computed: {
    ...mapGetters(["accountStatus"]),
  },
  created() {
    this.getStatus();
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  .box-card {
    width: 80%;
    margin: 0px auto;
    .el-icon-success {
      font-size: 20px;
    }
  }
  .successStatus {
    color: lightgreen;
  }
}
</style>